<template>
    <h1>子传父</h1>
    <h3>{{ fatherMsg }}</h3>
    <h3>{{ fatherNum }}</h3>
    <h3>{{ fatherObj }}</h3>

    <!-- 1.在子组件中使用defineEmits自定义事件 -->
    <!-- 2.在子组件中$emit触发自定义事件，同时传参 -->
    <!-- 3.在父组件中使用子组件，在子组件的标签中绑定子组件里面定义的自定义事件，接受参数 -->
    <Child @fn1="bar1" @fn2="bar2" @fn3="bar3"></Child>

</template>

<script setup lang='ts'>
import Child from './Child.vue';
import {ref} from "vue";

let fatherMsg=ref("");
let fatherNum=ref();
let fatherObj=ref({});

// 事件处理函数
let bar1=(res)=>{
    // res:形参，表示子组件传过来的数据
    fatherMsg.value=res.value;
}
let bar2=(res)=>{
    // res:形参，表示子组件传过来的数据
    fatherNum.value=res.value;
}
let bar3=(res)=>{
    console.log(res);
    // res:形参，表示子组件传过来的数据
    fatherObj=res;
}

</script>

<style scoped>

</style>
